<template>
  <div>
    <div class="time-vertical">
      <div
        class="test_bar"
        :style="`width:${barSize}px;height:${barHeight}px;left:-${barSize%2==0?barSize/2:Math.ceil(barSize/2)}px`"
      >
        <div class="barHeart" :style="`height:${barheartHeight}px;`"></div>
      </div>
      <div v-for="(item,index) in list" :key="index" class="vertical-item" ref="items">
        <div
          class="vertical-circle"
          :style="`width:${size}px;height:${size}px;left:-${size%2==0?size/2:Math.ceil(size/2)}px;
          top:-${size/2}px;background-color:${index<=currentIndex?circleActiveBg:circleBg}`"
        ></div>
        <div class="vertical-label" :style="labelStyle">{{item[keyValue]}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import myMixin from "../mixin";
export default {
  mixins: [myMixin],
  data() {
    return {
      barHeight: 0,
      barheartHeight: 0
    };
  },
  mounted() {
    let itemHeight = this.$refs.items[0].offsetHeight;
    this.barHeight = itemHeight * (this.$refs.items.length - 1);
    this.barheartHeight = this.currentIndex * itemHeight;
  }
};
</script>
<style lang="less" scoped src='./index.less'></style>